<template>
    <div>
        <div v-if="$route.name === 'VaccineDetail'" class="vaccine-detail">
            <!-- 页面头部 -->
            <div class="page-header">
                <el-page-header @back="router.back()" content="疫苗详情" />
                <div class="actions">
                    <el-button type="primary" @click="handleEdit">编辑</el-button>
                    <el-button type="danger" @click="handleDelete">删除</el-button>
                </div>
            </div>

            <!-- 加载状态 -->
            <el-skeleton v-if="loading" :rows="5" animated />

            <!-- 详情内容 -->
            <div v-else class="detail-content">
                <el-card>
                    <template #header>
                        <h3>基本信息</h3>
                    </template>

                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="疫苗名称">{{ vaccine.vaccineName }}</el-descriptions-item>
                        <el-descriptions-item label="疫苗编号">{{ vaccine.batchNumber }}</el-descriptions-item>
                        <el-descriptions-item label="生产厂家">{{ vaccine.manufacturer }}</el-descriptions-item>
                        <el-descriptions-item label="库存状态">
                            <el-tag
                                :type="vaccine.stockStatus === 'NORMAL' ? 'success' : vaccine.stockStatus === 'LOW' ? 'warning' : 'danger'">
                                {{ vaccine.stockStatus === 'NORMAL' ? '库存正常' : vaccine.stockStatus === 'LOW' ? '库存不足' :
                                    '库存过高' }}
                            </el-tag>
                        </el-descriptions-item>

                        <el-descriptions-item label="存储温度">{{ vaccine.storageCondition }}</el-descriptions-item>
                        <el-descriptions-item label="有效期">{{ vaccine.validityPeriod }}月</el-descriptions-item>
                        <el-descriptions-item label="疫苗描述">{{ vaccine.description }}</el-descriptions-item>
                    </el-descriptions>
                </el-card>

                <!-- 库存信息 -->
                <el-card style="margin-top: 20px;">
                    <template #header>
                        <h3>库存信息</h3>
                    </template>

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="stock-item">
                                <div class="label">总库存</div>
                                <div class="value">{{ vaccine.totalQuantity || 0 }}</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="stock-item">
                                <div class="label">可用库存</div>
                                <div class="value" :class="{ 'low-stock': (vaccine.availableQuantity || 0) < 10 }">
                                    {{ vaccine.availableQuantity || 0 }}
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="stock-item">
                                <div class="label">已预约</div>
                                <div class="value">{{ vaccine.lockedQuantity || 0 }}</div>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </div>

    </div>
    <router-view></router-view>

</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from "axios";
const route = useRoute()
const router = useRouter()
const loading = ref(false)
const vaccineId = route.query.id
// 疫苗数据
const vaccine = ref({})

onMounted(() => {
    fetchVaccineDetail()
})

const fetchVaccineDetail = async () => {
    loading.value = true
    axios.get("http://127.0.0.1:8081/vaccine/stock/one", {
        headers: {
            'X-Admin-Token': sessionStorage.getItem("token")
        },
        params: {
            id: vaccineId
        }
    }
    ).then((req) => {
        console.log(req);
        vaccine.value = req.data.data
    }).finally(() => {
        loading.value = false
    })

}

const handleEdit = () => {
    router.push({
        name: 'VaccineForm',
        query: { id: vaccineId }
    })
}

const handleDelete = async () => {
    try {
        await ElMessageBox.confirm('确定删除该疫苗吗？', '提示', {
            type: 'warning'
        })
        ElMessage.success('删除成功')
        router.push('/vaccine')
    } catch {
        // 用户取消删除
    }
}
</script>

<style scoped>
.vaccine-detail {
    padding: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.stock-item {
    text-align: center;
    padding: 10px;
}

.stock-item .label {
    color: #666;
    margin-bottom: 8px;
}

.stock-item .value {
    font-size: 24px;
    font-weight: bold;
    color: #409EFF;
}

.stock-item .value.low-stock {
    color: #F56C6C;
}
</style>